.index{
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	.inner_index {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing:border-box;
		.index_nav {
			position: absolute;
			left: 5%;
			top: 5%;
			width: 14%;
			height: calc( 100% - 10% );
			overflow: hidden;
			overflow-y: auto;
			.index_nav_item {
				cursor: pointer;
				width: 100%;
				height: 70px;
				line-height: 70px;
				border-radius: 6px;
				background-color: #fff;
				text-align: center;
				box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.33);
				margin-bottom: 20px;
				font-size: 16px;
				span {
					color: #444;
				}
				i {
					color: #3068fe;
					margin-right: 10px;
					font-size: 24px;
				}
			}
			.active_class {
				background-color: #3068fe;
				span {
					color: #fff;
				}
				i { 
					color: #fff;
				}
			}
		} 
		.router_view_box {
			overflow: hidden;
			width: 75%;
			height: 85%;
			position: absolute;
			left: 22.5%;
			right:5%;
			top: 5%;
			.router_view {
				width :100%;
				height: 100%;
				background-color: #fff;
				border-radius: 6px;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.54);
			}
		}
	}



	@media screen and (max-width: 768px) {
        .inner_index {
        	.index_nav {
        		top: calc( 100% - 2.5rem );
        		width: calc( 100% - 5% );
        		height: 2rem;
	       		.index_nav_item {
	       			margin-bottom: 0;
	       			margin-right: 0.2rem;
					width: 30%;
					height: 100%;
					line-height: 1.95rem;
					float: left;
					span {
						font-size: .4rem;
					}
					i {
						font-size: .5rem;
						margin-right: 2px;
					} 
	       		}
        	}
        	.router_view_box {
        		width: calc( 100% - .8rem );
				height: calc( 100% - 4rem );
				left: .4rem;
				right: .4rem;
				top: .4rem;
        	}
        }
        
    }
}